<template>
    <div class="upload-part">
        <div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
          <div v-if="item.status === 'finished'">
            <Icon type="key" style="fontSize: 30px"></Icon>
          </div>
          <div v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
          </div>
        </div>
        <Upload
          v-show="!uploadList.length"
          ref="upload"
          :headers="fromData"
          :action="'/api'+uploadUrl"
          :format="format"
          :on-format-error="uploadFormatError"
          max-size="200"
          :on-exceeded-size="handleMaxSize"
          :before-upload="() => preview()"
          :on-success="(res, file) => handleSuccess(res, file)"
          :show-upload-list="noshow"
          >
          <Button style="marginLeft: 10px" type="primary" class="button-upload">选择文件上传</Button>
        </Upload>
        <Button style="marginLeft: 10px" type="primary" v-if="uploadList.length > 0" class="button-upload" @click="onDelete">删除</Button>
      <Modal title="预览图片" width="30" v-model="viewModal" footer-hide>
        <div>
          <img :src="viewSrc" style="width: 100%" />
        </div>
      </Modal>
    </div>
</template>

<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
export default {
  name: 'imgUploadAndReview',
  model: {
    prop: 'uploadList',
    event: 'change'
  },
  props: {
    uploadList: {
      type: Array,
      default: [],
    },
    maxLength: {
      type: Number,
      default: 1, // -1不限制长度
    },
    mode: String, // edit编辑态 add新增态 review查看态
    noshow: Boolean,
    uploadUrl: {
      type: String,
      default: api.fileAll
    },
    uploadFormatError: {
      type: Function,
      default: () => {
        Vue.prototype.$Message.error("上传文件仅支持p12格式");
      }
    },
    handleMaxSize: {
      type: Function,
      default: () => {
        Vue.prototype.$Message.error("上传图片大小不能超过200kb");
      }
    },
    format: {
      type: Array,
      default: () => {
        return ['p12']
      }
    },
    beforeUpload: Function,
    onDelete: Function
  },
  data() {
     return {
       viewSrc: '',
       viewModal: false,
     }
  },
  mounted() {
    this.$refs['upload'].fileList = this.uploadList;
  },
  methods: {
    // 文件上传成功触发的函数
    handleSuccess(res, file) {
      res = this.uploadFileDecrypt(res);
      if (res.success) {
        file.res = res.object;
      } else {
        this.$Message.info("上传失败,请重试");
        return false;
      }
    },
    preview() {
      if (this.beforeUpload && !this.beforeUpload()) {
        return false;
      } else {
        if (this.maxLength != -1) {
          const check = this.uploadList.length < this.maxLength;
          if (!check) {
            this.$Message.info(`只能上传${this.maxLength}张图片`);
            return false;
          }
        }
      };
    }
  },
  watch: {
    uploadList(n) {
      this.$refs['upload'].fileList = this.uploadList;
    }
  }
}
</script>

<style scoped lang="less">
.upload-part {
  display: flex;
  position: relative;
  align-items: center;
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }
  // 关闭input文本框自动填充背景色黄色
  input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset !important;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
}
</style>
